<template>
    <el-row>
        <el-col style="height: 500px; display: flex; justify-content: center; align-items: center">
            <el-card class="box-card">
                <div class="header-center">
                    <span>修改密码</span>
                </div>
                <div class="card-body">
                    <el-form
                        label-width="80px"
                        :rules="rules"
                        ref="changePasswordForm"
                        :model="password"
                    >
                        <el-form-item
                            label="原密码"
                            prop="oldOne"
                        >
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.oldOne"
                                placeholder="请输入原密码"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            label="新密码"
                            prop="newOne"
                        >
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.newOne"
                                placeholder="请输入新密码"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            label="确认密码"
                            prop="check"
                        >
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.check"
                                placeholder="请确认新密码"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                    <el-row>
                        <el-col class="operate">
                            <el-button
                                size="mini"
                                type="primary"
                                @click="sureToChange"
                            >保 存</el-button>
                            <el-button
                                size="mini"
                                @click="cancel"
                            >返 回</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
export default {
  name: 'ChangePassword',

  data() {
    const checkOldPassWord = (rule, value, callback) => {
      console.log('value', value)
      if (!value) {
        callback(new Error(' '))
        this.$message('请验证原密码')
      } else {
        callback()
      }
    }
    const checkNewPassWord = (rule, value, callback) => {
      if (!value) {
        callback(new Error(' '))
        // this.$message('请输入新密码')
      } else if (value === this.password.oldOne) {
        callback(new Error(' '))
        // this.$message('新密码不可与原密码相同')
      } else {
        callback()
      }
    }
    const checkNewPassWordSame = (rule, value, callback) => {
      if (!value) {
        callback(new Error(' '))
        // this.$message('请确认新密码')
      } else if (value === this.password.newOne) {
        callback()
      } else {
        callback(new Error(' '))
        // this.$message('请确认两次新密码内容一致')
      }
    }
    return {
      password: {
        oldOne: '',
        newOne: '',
        check: ''
      },

      rules: {
        oldOne: [
          {
            required: true,
            validator: checkOldPassWord,
            trigger: 'blur'
          }
        ],
        newOne: [
          {
            required: true,
            validator: checkNewPassWord,
            trigger: 'blur'
          }
        ],
        check: [
          {
            required: true,
            validator: checkNewPassWordSame,
            trigger: 'blur'
          }
        ]
      }
    }
  },

  methods: {
    cancel() {
      this.$router.back()
    },

    sureToChange() {
      this.$refs.changePasswordForm.validate(valid => {
        console.log('验证结果', valid)
        if (valid) {
          // console.log(this.password);
          this.$confirm('该项操作将更改用户登录密码, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              try {
                this.$axios({
                  method: 'put',
                  url:
                    '/change-password?' +
                    `newPassword=${this.password.newOne}&oldPassword=${this.password.oldOne}`,
                  data: '',
                  headers: {
                    'Content-Type': 'application/json'
                  }
                }).then(
                  res => {
                    if (res && res.data.code === 200) {
                      this.$router.push('/login')
                      this.$message.success('更新成功')
                    }
                  },
                  err => {
                    this.$message.info(`更新失败  ${err.response.data.message}`)
                  }
                )
              } catch (e) {
                this.$message.info(`请求失败  ${e}`)
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            })
        } else {
          if (!this.password.oldOne) {
            this.$message('请输入原密码')
          } else {
            console.log('!this.password.newOne', !this.password.newOne)
            if (!this.password.newOne) {
              this.$message('请输入新密码')
            } else if (this.password.oldOne === this.password.newOne) {
              this.$message('新密码不可与原密码相同')
            } else if (!this.password.check) {
              this.$message('请确认新密码')
            } else if (this.password.newOne !== this.password.check) {
              this.$message('请确认两次新密码内容一致')
            }
          }
          // this.$message('填写有误，请修改后保存');
          return false
        }
        return null
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 600px;
}
.header-center {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.card-body {
  padding: 20px;
}
.operate {
  display: flex;
  justify-content: center;
  align-items: center;
}
.operate .el-button + .el-button {
  margin-left: 40px;
}
</style>
